<html class=" js boxshadow pointerevents placeholder" lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>flowable流程管理</title>
		<meta name="description" content="Custom Login Form Styling with CSS3">
		<meta name="keywords" content="flowable, h2, springmvc">
		<meta name="author" content="Codrops">
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" type="text/css" href="font-awesome.css">
		<style>
			.sucainiu-footer{text-align:center; padding-top:50px;}
			.sucainiu-footer p{line-height:30px;}
			.sucainiu-footer a{color:#06F}
		</style>
		<script src="jquery.placeholder.min.js"></script>
	</head>
	<body>
		<div class="container">
		<header>
		<h1>Flowable <strong>流程管理</strong> </h1>
		<h2>Flowable process management demo </h2>
		</header>
		<section class="main">
			<form class="form-1">
				<p class="field">
					<input type="text" name="login" placeholder="Username or email">
					<i class="icon-user icon-large"></i>
				</p>
				<p class="field">
					<input type="password" name="password" placeholder="Password">
					<i class="icon-lock icon-large"></i>
				</p>
				<p class="submit">
					<button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
				</p>
			</form>
		</section>
		</div>
		<div class="sucainiu-footer">
	     </div>
		<script type="text/javascript">
			$(function(){
				$(".showpassword").each(function(index,input) {
					var $input = $(input);
					$("<p class='opt'/>").append(
						$("<input type='checkbox' class='showpasswordcheckbox' id='showPassword' />").click(function() {
							var change = $(this).is(":checked") ? "text" : "password";
							var rep = $("<input placeholder='Password' type='" + change + "' />")
								.attr("id", $input.attr("id"))
								.attr("name", $input.attr("name"))
								.attr('class', $input.attr('class'))
								.val($input.val())
								.insertBefore($input);
							$input.remove();
							$input = rep;
						 })
					).append($("<label for='showPassword'/>").text("Show password")).insertAfter($input.parent());
				});

				$('#showPassword').click(function(){
					if($("#showPassword").is(":checked")) {
						$('.icon-lock').addClass('icon-unlock');
						$('.icon-unlock').removeClass('icon-lock');    
					} else {
						$('.icon-unlock').addClass('icon-lock');
						$('.icon-lock').removeClass('icon-unlock');
					}
				});
			});
		</script>
	</body>
</html>